<template>
  <div class="container">
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%" :model="detailList">
      <el-row>
        <el-col :span="6"
          >【题型】：
          <span v-if="detailList.questionType == 1">单选题</span>
          <span v-else-if="detailList.questionType == 2">多选题</span>
          <span v-else-if="detailList.questionType == 3">简答</span>
        </el-col>
        <el-col :span="6">【编号】：{{ detailList.id }}</el-col>
        <el-col :span="6"
          >【难度】：
          <span v-if="detailList.difficulty == 1">简单</span>
          <span v-else-if="detailList.difficulty == 2">一般</span>
          <span v-else-if="detailList.difficulty == 3">困难</span>
        </el-col>
        <el-col :span="6">【标签】：{{ detailList.tags }}</el-col>
        <el-col :span="6">【学科】：{{ detailList.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ detailList.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ detailList.direction }}</el-col>
      </el-row>

      <hr />

      <div style="padding: 10px 0">【题干】：</div>
      <div style="color: blue"><p v-html="detailList.question"></p></div>
      <!-- 单选题 -->
      <div v-if="detailList.questionType == 1">
        <div style="padding: 10px 0">单选题 选项：（以下选中的选项为正确答案）</div>

        <div v-for="item in options" :key="item.code">
          <el-radio :value="item.isRight" :label="1">{{ item.title }}</el-radio>
        </div>
      </div>

      <!-- 多选题 -->
      <div v-if="detailList.questionType == 2">
        <div style="padding: 10px 0">多选题 选项：（以下选中的选项为正确答案）</div>
        <div v-for="item in options" :key="item.code">
          <el-checkbox :value="item.isRight ? true : false">{{ item.title }}</el-checkbox>
        </div>
      </div>

      <div style="padding: 8px 0">
        【参考答案】:
        <el-button size="mini" type="danger" @click="videoShow">视频答案预览</el-button>
        <div v-show="flag">
          <video ref="video" controls :src="detailList.videoURL"></video>
        </div>
      </div>
      <hr />
      <div style="padding: 8px 0; display: inline-block">【答案解析】：</div>
      <span v-html="detailList.answer" style="display: inline-block"></span>
      <hr />
      <div style="padding: 8px 0; display: inline-block">【题目备注】：</div>
      <span v-html="detailList.remarks" style="display: inline-block"></span>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="PreviewHide">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/questions";
export default {
  data() {
    return {
      dialogVisible: false,

      detailList: [],
      creatorID: 0,
      options: [],
      flag: false,
      checked: [],
    };
  },

  props: {},
  methods: {
    videoShow() {
      this.flag = true;
      this.$refs.video.play();
    },
    PreviewHide() {
      this.dialogVisible = false;
      this.$refs.video.pause();
    },
    async PreviewShow(id) {
      this.dialogVisible = true;
      const { data } = await detail({ id });
      this.detailList = data;
      this.creatorID = this.detailList.creatorID;
      this.options = this.detailList.options;
      console.log(this.options);
    },
  },
};
</script>

<style scoped>
.el-col {
  padding: 10px 0;
}
.el-checkbox,
.el-radio {
  padding: 8px;
}
video {
  width: 400px;
  height: 200px;
  margin-top: 15px;
}
</style>
